<template>
	<view class="task_warp">
		<!--组件-->
		<swiperNavBar
			:scrollIntoView="0"
			:swiperTabList='swiperTabList'
			:activeTabIdx='activeTabIdx'
			currentSwiperWidth="33.333%"
			:currentSwiperHeight="82"
			swiperCurrentSize='26rpx'
			swiperColor='#666'
			swiperCurrentColor='#2989FD'
			:currentSwiperLineShow="true"
			currentSwiperLineActiveWidth="100rpx"
			currentSwiperLineActiveHeight="6rpx"
			currentSwiperLineActiveBg="#2989FD"
			:currentSwiperLineAnimatie="300"
			@change="switchTab">
		</swiperNavBar>


		<view class="list_Warps flex f_column">
			<view class="l_w_item flex f_align f_align_center"
				v-for="(item,index) in taskList" :key="index"
				@click="toTaskDetail(item)"
			>
				<view class="flex f_align_center">
					<view class="lef_head">
						<image class="autoImg" :src="item.stepList[0].imgUrl" mode=""></image>
					</view>
					<view class="flex f_column f_align">
						<view class="bold f_shrink0 overfont" style="width: 400rpx;">{{item.title}}</view>
						<view class="">
							<text>{{item.number-item.residueNumber}}人已赚</text>
							<text class="r_me">剩{{item.residueNumber}}个名额</text>
						</view>
					</view>
				</view>

				<view class="r_x_price">赏{{item.amount}}金币</view>
			</view>
		</view>


		<!-- 加载 -->
		<loadMore :isLoading="isLoading" :isDone="isDoneTask" />
		<!-- 中间键功能 -->
		<mainBtn />
	</view>
</template>

<script>
	import { mapMutations } from 'vuex';
	import mainBtn from '@/components/mainBtn/mainBtn.vue'
	import swiperNavBar from '@/components/swiperNavBar/swiperNavBar.vue'
	import loadMore from '@/components/loadMore/loadMore'
	export default {
		components:{
			loadMore
		},
		data() {
			return {
				isLoading:false,
				isDoneTask:false,

				swiperTabList: [
					{
						index: 0,
						name: '综合排序',
						value: ''
					},
					{
						index: 1,
						name: '最新发布',
						value: '0'
					},
					{
						index: 2,
						name: '价格最高',
						value: '1'
					}
				],
				activeTabIdx: 0,
				activeVal:'',

				page:{
					pageIndex:1,
					limit:10,
					totalPage:0
				},
				taskList:[]
			};
		},
		components:{
			mainBtn,swiperNavBar,loadMore
		},
		onShow() {
			this.OPEN_MID_BTN(false);
			this.init();
		},
		onLoad() {

		},
		methods: {
			...mapMutations([
				'OPEN_MID_BTN'
			]),
			init(){
				this.getTaskCenter();
			},
			// tab切换
			switchTab (item) {
				this.activeTabIdx = item.index;
				this.activeVal = item.value;
				this.page.page = 1;
				this.init();
			},
			//查询任务中心任务
			async getTaskCenter(){
				const _this = this;

				_this.isLoading = true;
				let res = (await _this.$http('/api/unAuth/job/listUserJob','post',{
					page:_this.page.pageIndex,
					limit:_this.page.limit,
					orderType:_this.activeVal
				})).data;
				uni.stopPullDownRefresh();
				_this.isLoading = false;
				if(res && res.code == 0){
					let list = res.data.list;
					_this.page.totalPage = res.data.totalPage;
					if(_this.page.pageIndex <= 1){
						_this.taskList.splice(0);
					}
					if(_this.page.totalPage <= _this.page.pageIndex){
						_this.isDoneTask = true;
					}else{
						_this.isDoneTask = false;
					}
					_this.taskList = _this.taskList.concat(list);
				}
			},
			//去任务详情
			toTaskDetail(item){
				const _this = this;
				let token = uni.getStorageSync('token')
				if(token == ''){
					return _this.$loginAuth();
				}
				this.$navTo('../taskDetail/taskDetail?jobId='+item.jobId)
			}
		},
		//滚动到底部
		onReachBottom() {
			const _this =this;
			if(_this.page.pageIndex < _this.page.totalPage){
				_this.page.pageIndex++;
				_this.init();
			}else{
				_this.isDoneTask = true;
			}
		},
		onPullDownRefresh() {
			this.page.pageIndex = 1;
			this.init();
		}
	}
</script>

<style lang="scss" scoped>
	.task_warp{
		width: 100%;
		.l_w_item{
			border-top: solid 1rpx $ych_br_color;
			padding: 24rpx;
			color: #999;
			font-size: 24rpx;
			.lef_head{
				width: 90rpx;height: 90rpx;
				border-radius: 50%;
				margin-right: 26rpx;
			}
			.bold{
				font-size: 32rpx;
				color: $ych_font_color1;
				margin-bottom: 12rpx;
			}
			.r_me{
				margin-left: 96rpx;
			}
			.r_x_price{
				color: #E6212A;
				font-size: 32rpx;
			}
		}
	}
</style>
